<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="restoratives"></div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted } from "vue";
  import * as echarts from "echarts";
  
  onMounted(() => {
    var chartDom = document.getElementById("restoratives");
    var myChart = echarts.init(chartDom);
  
    const stateData = {
      xAxisData: ["5号", "10号", "15号", "20号", "25号", "30号"],
      chineseMedicineData: [10, 35, 40, 32, 40, 34],
      miscellaneousMedicineData: [20, 28, 39, 22, 15, 27],
      vaccineData: [15, 20, 30, 25, 35, 30],
    };
  
    var option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["中药","杂药" , "疫苗"],
        textStyle: {
          fontSize: 14,
          fontFamily: "PingFangSC, PingFang SC",
          fontWeight: 400,
          color:'#fff'
        },
      },
      grid: {
        top: "18%",
        left: "5%",
        right: "5%",
        bottom: "25%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: stateData.xAxisData,
        axisLabel: {
          fontSize: 14,
          fontFamily: "PingFangSC, PingFang SC",
          fontWeight: 400,
          color: "#b6babf",
          formatter: "{value}",
        },
      },
      yAxis: {
        type: "value",
        name: "单位：万",
        nameTextStyle: {
          fontSize: 14,
          fontFamily: "PingFangSC, PingFang SC",
          fontWeight: 400,
        },
        axisLabel: {
          fontSize: 14,
          fontFamily: "PingFangSC, PingFang SC",
          fontWeight: 400,
          color: "#b6babf",
        },
      },
      series: [
        {
          name: "中药",
          type: "line",
          smooth: true,
          data: stateData.chineseMedicineData,
          lineStyle: {
            color: "rgba(255, 116, 133, 1)",
            width: 2,
          },
          itemStyle: {
            color: "rgba(255, 116, 133, 1)",
          },
        },
        {
          name: "杂药",
          type: "line",
          smooth: true,
          data: stateData.miscellaneousMedicineData,
          lineStyle: {
            color: "#f90",
            width: 2,
          },
          itemStyle: {
            color: "#f90",
          },
        },
        {
          name: "疫苗",
          type: "line",
          smooth: true,
          data: stateData.vaccineData,
          lineStyle: {
            color: "rgba(95, 175, 255, 1)",
            width: 2,
          },
          itemStyle: {
            color: "rgba(95, 175, 255, 1)",
          },
        },
      ],
    };
  
    myChart.setOption(option);
  
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  });
  </script>
  
  <style scoped>
  #restoratives {
    width: 100%;
    height: 100%;
  }
  </style>